<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专辑管理</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<!-- 专辑列表 -->
<div id="list">
    <div style="padding: 20px">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>专辑列表</legend>
            <div class="layui-field-box">
                <!-- 表格容器 -->
                <table class="layui-hide" id="albumTable" lay-filter="albumTable"></table>
            </div>
        </fieldset>
    </div>
</div>

<!-- 专辑详情 -->
<div id="details" style="display: none;padding: 20px">
    <div style="text-align: right; margin-bottom: 10px;">
        <button id="backToList" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-icon-return"></i>返回列表
        </button>
    </div>
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="3">
                <img src="" id="albumImg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="albumName"></span></h2>
            </td>
        </tr>
        <tr>
            <td>歌手: <span id="singer"></span></td>
            <td>唱片公司: <span id="company"></span></td>
        </tr>
        <tr>
            <td>发行时间: <span id="publishTime"></span></td>
            <td>状态: <span id="status"></span></td>
        </tr>
    </table>
    <!-- 专辑详情表格 -->
    <table id="albumDetails"></table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        var form = layui.form;
        //加载jquery对象
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        //渲染专辑表格
        table.render({
            elem: '#albumTable',
            url: '/album/list', //后端接口地址
            method: 'GET',
            page: true, //开启分页
            limits: [5, 10, 15, 20],
            limit: 5,
            request: {
                pageName: 'page', //页码的参数名称，与后端匹配
                limitName: 'limit' //每页数据量的参数名，与后端匹配
            },
            response: {
                statusName: 'code', //规定数据状态的字段名称，默认：code
                statusCode: 0, //规定成功的状态码，默认：0
                msgName: 'msg', //规定状态信息的字段名称，默认：msg
                countName: 'count', //规定数据总数的字段名称，默认：count
                dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'name', title: '专辑名称', width: 150},
                {field: 'singer', title: '歌手', width: 120},
                {field: 'company', title: '唱片公司', width: 150},
                {
                    field: 'publishTime', title: '发行时间', width: 120, templet: function (d) {
                        // 格式化日期显示
                        if (d.publishTime) {
                            // 处理多种日期格式
                            var date;
                            if (typeof d.publishTime === 'string') {
                                // 处理ISO格式日期字符串
                                date = new Date(d.publishTime);
                            } else if (typeof d.publishTime === 'number') {
                                // 处理时间戳
                                date = new Date(d.publishTime);
                            } else {
                                // 其他情况直接使用
                                date = d.publishTime;
                            }
                            
                            if (date && !isNaN(date.getTime())) {
                                var year = date.getFullYear();
                                var month = ('0' + (date.getMonth() + 1)).slice(-2);
                                var day = ('0' + date.getDate()).slice(-2);
                                return year + '-' + month + '-' + day;
                            }
                        }
                        return '';
                    }
                },
                {
                    field: 'status', title: '状态', width: 100, templet: function (d) {
                        if (d.status === 1) {
                            return '<span style="color: green;">上架</span>';
                        } else {
                            return '<span style="color: red;">下架</span>';
                        }
                    }
                },
                {title: '操作', toolbar: '#rowTools'}
            ]]
        });

        //监听行工具事件
        table.on('tool(albumTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'upload') {
                //上传音乐
                //打开音乐上传页面，并传递专辑ID
                layer.open({
                    type: 2,
                    title: '上传音乐',
                    content: 'music-add.html?aid=' + data.id,
                    area: ['600px', '500px'],
                    end: function() {
                        //关闭弹窗后刷新表格
                        table.reload('albumTable');
                    }
                });
            } else if (layEvent === 'edit') {
                //编辑专辑
                layer.open({
                    type: 2,
                    title: '编辑专辑',
                    content: 'album-edit.html?id=' + data.id,
                    area: ['600px', '550px'],
                    end: function() {
                        //关闭弹窗后刷新表格
                        table.reload('albumTable');
                    }
                });
            } else if (layEvent === 'del') {
                //删除专辑
                layer.confirm('确定删除该专辑吗？', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/album/delete?id=' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code === 0) {
                                layer.msg('删除成功');
                                obj.del(); //删除对应行（tr）的DOM结构
                            } else {
                                layer.msg('删除失败: ' + result.msg);
                            }
                        },
                        error: function () {
                            layer.msg('删除异常');
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'detail') {
                //查看详情
                showDetail(data);
            }
        });

        //显示详情
        function showDetail(data) {
            //填充数据
            $('#albumName').text(data.name);
            $('#singer').text(data.singer);
            $('#company').text(data.company);
            if (data.publishTime) {
                var date = new Date(data.publishTime);
                var year = date.getFullYear();
                var month = ('0' + (date.getMonth() + 1)).slice(-2);
                var day = ('0' + date.getDate()).slice(-2);
                $('#publishTime').text(year + '-' + month + '-' + day);
            }
            $('#status').text(data.status === 1 ? '上架' : '下架');
            
            //显示详情面板
            $('#albumTable').hide();
            $('#details').show();
        }

        //返回列表
        $('#backToList').click(function () {
            $('#details').hide();
            $('#albumTable').show();
        });
    });
</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="upload">
            <i class="layui-icon layui-icon-upload"></i>
            上传音乐
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
    </div>
</script>

</body>
</html>